<template>
  <section>
    <section class="theme1">
      <div class="swipe">

      </div>
      <section class="userInfo">
        <div class="contentUser">
          <img :src="headUrl" alt="">
          <p class="username">
            <span class="name">{{userName}}</span>
            <span class="vipGrade" v-if="ifPatients">职位：{{userRole}}</span>
          </p>
        </div>
      </section>
      <section class="plate">
        <div class="health" @click="changePage('MedicalRecord')" v-if="ifDoctor">
          <img src="../../assets/dianzibingli.png" alt="" style="width: 24px;">&nbsp&nbsp电子病历
      </div>
        <div class="health" v-if="ifPatients" @click="changePage('auditstatus')">
          <img src="../../assets/renzheng.png" alt="" style="width: 24px;">&nbsp&nbsp认证中心
        </div>
        <div class="twoPlate">
          <!-- <p @click="changePage('doctorlist')"  v-if="ifDoctor">
            <img src="../../assets/myWoker.png" alt="" style="width: 24px;">&nbsp&nbsp我的医生
          </p>
          <p @click="changePage('patientlist')"   v-if="ifPatients">
            <img src="../../assets/myWoker.png" alt="" style="width: 24px;">&nbsp&nbsp我的患者
          </p> -->
          <p @click="changePage('wodeshoucang')">
            <img src="../../assets/wodeshoucang.png" alt="" style="width: 24px;">&nbsp&nbsp我的收藏
          </p>
          <p @click="changePage('articlelist')">
            <img src="../../assets/dianzibingli.png" alt="" style="width: 24px;">&nbsp&nbsp干货
        </p>
        </div>
      </section>
      <!-- <span class="about" @click="changePage('wodeshoucang')">
        <img src="../../assets/wodeshoucang.png" alt="" style="width: 24px;">&nbsp&nbsp我的收藏
      </span> -->
      <span class="about" @click="changePage('doctorlist')"  v-if="ifDoctor">
        <img src="../../assets/myWoker.png" alt="" style="width: 24px;">&nbsp&nbsp&nbsp我的医生
      </span>
      <span class="about" @click="changePage('patientlist')"  v-if="ifDoctorPass">
        <img src="../../assets/myWoker.png" alt="" style="width: 24px;">&nbsp&nbsp&nbsp我的患者
      </span>
    </section>

  </section>
</template>

<script>
  import axios from 'axios'
  import {Toast,Indicator } from 'mint-ui';
  import {getUserInfo,getUserList} from '../../api/api'
  export default {
    components: {},
    data() {
      return {
        headUrl:'',
        userName:"尚未登记",
        userRole:'暂无',
        hospitalInfo:'2019-10-24',
        ifUserIsPatients:true,
        ifDoctor:true,
        ifPatients:true,
        ClientType:'',
        ifDoctorPass:false,
      }
    },
    props: {},
    watch: {
    },
    methods:{
      changePage:function(meta){
        this.$router.push({
          path:'/'+meta
        })
      },
      getDoctorInfo:function(id){
        let param={
          UserId:id,
          Name: "",
          PageSize:100,
          CurrentPage: 1
        }
        getUserList(param).then(res=>{
          if(res.data.IsSuccess){
            this.userRole=res.data.Result[0].JobTitle
            if(res.data.Result[0].ApprovalStatus!==2){
              this.ifDoctorPass=false;
            }else{
              this.ifDoctorPass=true;
            }
          }
        }) 
      },
      //获取用户基本信息（包括token）
      getUserInfo:function(){
        let param={
          ClientType:this.ClientType,
          // OpenId:'oFZpn1FWlOxLX6Him22snbbvNj2k',
          OpenId:localStorage.getItem("openid")
        }
        getUserInfo(param).then(res=>{
          if(res.IsSuccess){
            localStorage.setItem('user', JSON.stringify(res.Result));
            this.headUrl=JSON.parse(res.Result.WxUserInfo).headimgurl
            // localStorage.setItem('user', res.Result.WxUserInfo);
            if(this.ClientType=='2'){
              localStorage.setItem('choosePatientId',res.Result.Id)
              var userBaseInfo={};
              userBaseInfo.Birthday=res.Result.Birthday;
              userBaseInfo.UserName=res.Result.UserName;
              userBaseInfo.Gender=res.Result.Gender;
              console.log('用户名',res.Result.UserName);
              this.userName=res.Result.UserName;
              localStorage.setItem('patientBaseInfo',userBaseInfo);
            }else if(this.ClientType=='1'){
              // this.userRole=res.Result.JobTitle;
              this.userName=res.Result.UserName;
              this.getDoctorInfo(res.Result.Id);
              if(localStorage.getItem('patientBaseInfo')){
                localStorage.removeItem('patientBaseInfo')
              }
            }
          }
        })
      },
    },
    filters: {},
    computed: {},
    created() {
    },
    mounted(){
      console.log('url===>',window.location.href);
      if(window.location.href.split('=')[1]){
        //有openid
        localStorage.setItem("openid",window.location.href.split('=')[1])
      }
      else{
        //没有openid
        console.log("222");
      }
      if(window.location.href.split("/")[5]=="patient"){
        this.ClientType='2';
        this.ifPatients=false;
      }
      else{
        this.ClientType='1';
        this.ifDoctor=false;
      }
      this.Height=localStorage.getItem('windowHeight');
      this.getUserInfo();
    },
    destroyed() {
    },
  }
</script>

<style lang="scss" scoped>
  .theme1 {
    .swipe {
      width: 100%;
      height:160px;
      background-image: url("../../assets/my_background.png");
    }
    /*--------------------------------------------userInfo*/
    .userInfo {
      width: 93%;
      height: 90px;
      background-color: white;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: -45px;
      z-index: 22;
      box-shadow:0px 5px 20px rgba(67, 117, 218, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      .contentUser {
        width: 90%;
        height: 63px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        width: 63px;
        height: 63px;
        border-radius: 50%;
      }
      .username {
        display: inline-block;
        width: 52%;
        height: 90%;
        margin-left: 3%;
        text-align: left;
        .name {
          display: inline-block;
          width: 100%;
          font-size: 15px;
          line-height: 30px;
          height: 30px;
          overflow: hidden;
          font-weight: 500;
        }
        .vipGrade {
          display: inline-block;
          font-size: 12px;
          color: gray;
          padding-left: 3px;
          padding-right: 3px;
          border-radius: 2px;
          font-weight: 200;
        }
      }
    }

    /*-----------------------------------------plate*/
    .plate {
      width: 93%;
      margin: 0 auto;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      .health {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;
        background-color: white;
        border-radius:5px;
      }
      div {
        width: 48%;
        height: 140px;
        font-size: 15px;
        box-shadow:0px 5px 20px rgba(67, 117, 218, 0.2);
      }
      .twoPlate {
        box-shadow: none;
        p {
          width: 100%;
          height: 48%;
          box-shadow:0px 5px 20px rgba(67, 117, 218, 0.2);
          background-color: white;
          display: flex;
          align-items: center;
          position: relative;
          justify-content: center;
          border-radius:5px;
        }
        p:first-child {
          margin-bottom: 4%;
        }
      }
    }

    /*第三种*/
    .about {
      width: 93%;
      margin: 0 auto;
      height: 65px;
      margin-top: 3%;
      margin-bottom: 20px;
      box-shadow:0px 5px 20px rgba(67, 117, 218, 0.2);
      background-color: white;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;
      border-radius:5px;
    }
  }
</style>
